import type { EventDTO, EventType } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { EntityMap } from "@/components/entity/entity-map";
import { JsonLd } from "@/components/entity/json-ld";
import { ExtLink } from "@/components/entity/kv";
import { fPageHref, PagedFacilities, parseFPage } from "@/components/entity/paged-facilities";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { EventList } from "@/components/event-list";
import { ClaimsTable, DataQualityPanel } from "@/components/evidence";
import { FacilityTable } from "@/components/facility-table";
import { ExpansionVelocityBlock } from "@/components/intelligence/operator/velocity";
import { CoverageBar, HonestEmpty, MwFigure, PillLink, PipelineBars, PublishedOnlyNote, ShareList } from "@/components/intelligence/shared";
import { WatchButton } from "@/components/intelligence/watch-button";
import { ProjectList } from "@/components/project-list";
import { Badge } from "@/components/ui/badge";
import { Page, Section } from "@/components/ui/card";
import { StackedBar } from "@/components/ui/charts";
import { CountryFlag } from "@/components/ui/country-flag";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { EmptyState, ErrorState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { SourceHistory } from "@/components/ui/timeline";
import { api } from "@/lib/api";
import type { DetailFacilitiesMeta } from "@/lib/dto";
import { countryName, fmtDate, fmtInt, fmtMw, fmtPct, pluralize } from "@/lib/format";
import { OPERATOR_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { compactJsonLd, NOT_FOUND_METADATA, pageMetadata } from "@/lib/seo";
import type { SearchParams } from "@/lib/sort";
import { CloudStatusBadge } from "../../cloud-regions/cloud-format";

export const revalidate = 300;

type Props = { params: Promise<{ slug: string }>; searchParams: Promise<SearchParams> };

function describe(o: { name: string; kind: string | null; facilityCount: number; countryCount: number; knownMw?: number | null; plannedMw?: number | null; hqCountryIso2?: string | null }): string {
  const parts = [`${o.name} — ${o.kind ? OPERATOR_KIND_LABEL[o.kind as keyof typeof OPERATOR_KIND_LABEL].toLowerCase() : "data center operator"}`];
  parts.push(`${fmtInt(o.facilityCount)} ${pluralize(o.facilityCount, "facility", "facilities")} in ${fmtInt(o.countryCount)} ${pluralize(o.countryCount, "country", "countries")}`);
  if (o.knownMw) parts.push(`${fmtMw(o.knownMw)} known operational capacity`);
  if (o.plannedMw) parts.push(`≈ ${fmtMw(o.plannedMw)} in the pipeline`);
  if (o.hqCountryIso2) parts.push(`headquartered in ${countryName(o.hqCountryIso2)}`);
  return `${parts.join(", ")}. Footprint map, pipeline, expansion velocity, geographic diversity, corporate events, claims and data quality on DataCenterIndex.`;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const r = await api.operator(slug);
  if (!r.ok) return r.status === 404 ? NOT_FOUND_METADATA : { title: "Operator", alternates: { canonical: routes.operator(slug) } };
  return pageMetadata({ title: r.data.name, description: describe(r.data), path: routes.operator(slug) });
}

/** Corporate events are served separately by the API; everything else on the operator is a physical change. */
const CORPORATE_TYPES = new Set<EventType>(["acquisition", "investment_announced", "partnership", "executive_change", "customer_agreement", "owner_changed", "operator_changed", "power_agreement"]);

export default async function OperatorPage({ params, searchParams }: Props) {
  const [{ slug }, sp] = await Promise.all([params, searchParams]);
  const fPage = parseFPage(sp.fPage);
  const r = await api.operator(slug, fPage > 1 ? { fPage } : undefined);
  if (!r.ok && r.status === 404) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const o = r.data;
  const meta = (r.meta ?? {}) as DetailFacilitiesMeta;
  const facTotal = meta.facilitiesTotal ?? o.facilityCount;
  const facPer = meta.facilitiesPerPage ?? 50;
  const base = routes.operator(slug);
  const kindLabel = o.kind ? OPERATOR_KIND_LABEL[o.kind] : null;
  const aliases = o.aliases.filter((a) => a && a !== o.name);
  const sameAs = Object.values(o.externalIds ?? {})
    .map(String)
    .filter((v) => /^https?:\/\//.test(v));
  const statusTotal = Object.values(o.statusBreakdown).reduce((a, b) => a + (b ?? 0), 0);
  const corporateIds = new Set(o.corporateEvents.map((e) => e.id));
  // physical = every non-corporate event (generic types such as news / page_changed stay on this side rather than being dropped)
  const physical: EventDTO[] = o.recentEvents.filter((e) => !corporateIds.has(e.id) && !CORPORATE_TYPES.has(e.eventType));
  const corporate: EventDTO[] = o.corporateEvents.length ? o.corporateEvents : o.recentEvents.filter((e) => CORPORATE_TYPES.has(e.eventType));
  const constructionMw = o.constructionMw ?? o.pipeline.construction.mw;
  const plannedMw = o.plannedMw ?? (o.pipeline.approved.mw === null && o.pipeline.announced.mw === null ? null : (o.pipeline.approved.mw ?? 0) + (o.pipeline.announced.mw ?? 0));
  const coverage = o.mwCoverage ?? o.pipeline.mwCoverage;
  const cloud = [...o.cloudRegions].sort((a, b) => a.code.localeCompare(b.code));

  const jsonLd = compactJsonLd({
    "@context": "https://schema.org",
    "@type": "Organization",
    "@id": `${routes.operator(slug)}#org`,
    name: o.name,
    url: o.website ?? undefined,
    alternateName: aliases.length ? aliases : undefined,
    sameAs: sameAs.length ? sameAs : undefined,
    description: o.description ?? describe(o),
    parentOrganization: o.parent ? { "@type": "Organization", name: o.parent.name } : undefined,
    location: o.hqCountryIso2 ? { "@type": "Country", name: countryName(o.hqCountryIso2) } : undefined,
  });

  const sections = [
    { id: "map", label: "Map", count: o.facilityCount },
    { id: "pipeline", label: "Pipeline" },
    { id: "geography", label: "Geography", count: o.topCountries.length + o.topMetros.length },
    { id: "velocity", label: "Velocity" },
    { id: "events", label: "Events", count: physical.length + corporate.length },
    { id: "ai", label: "AI facilities", count: o.aiFacilities.length },
    { id: "cloud", label: "Cloud regions", count: cloud.length },
    { id: "projects", label: "Projects", count: o.projects.length },
    { id: "facilities", label: "Facilities", count: facTotal },
    { id: "claims", label: "Claims", count: o.claims.length },
    { id: "quality", label: "Data quality" },
    { id: "history", label: "Source history", count: o.sourceHistory.length },
  ];

  return (
    <Page>
      <JsonLd data={jsonLd} />
      <div className="pt-3">
        <Breadcrumbs items={[{ name: "Operators", href: routes.operators() }, { name: o.name, href: base }]} />
      </div>

      <header className="py-5 sm:py-7">
        <div className="flex flex-wrap items-center gap-2">
          <div className="label-caps">Operator</div>
          {kindLabel && (
            <Badge tone={o.kind === "hyperscaler" ? "accent" : "outline"} size="xs">
              {kindLabel}
            </Badge>
          )}
          {o.isCloudProvider && (
            <Badge tone="outline" size="xs">
              Cloud provider
            </Badge>
          )}
          {o.isCarrier && (
            <Badge tone="outline" size="xs">
              Carrier
            </Badge>
          )}
        </div>
        <div className="mt-1.5 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            <h1 className="text-[24px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[30px]">{o.name}</h1>
            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[13px] text-ink-2">
              {o.hqCountryIso2 && (
                <span className="inline-flex items-center gap-1.5">
                  <span className="text-ink-3">HQ</span>
                  <Link href={routes.country(o.hqCountryIso2.toLowerCase())} className="inline-flex items-center gap-1.5 hover:text-ink hover:underline">
                    <CountryFlag iso2={o.hqCountryIso2} withName />
                  </Link>
                </span>
              )}
              {o.website && <ExtLink href={o.website} className="no-underline hover:underline" />}
              {o.parent && (
                <span>
                  <span className="text-ink-3">Part of </span>
                  <Link href={routes.operator(o.parent.slug)} className="text-ink hover:text-accent hover:underline">
                    {o.parent.name}
                  </Link>
                </span>
              )}
            </div>
          </div>
          <div className="flex shrink-0 flex-wrap items-center gap-2">
            <WatchButton entityType="operator" slug={o.slug} entityId={o.id} name={o.name} />
            <PillLink href={routes.compareOperators([o.slug])}>Compare with…</PillLink>
          </div>
        </div>
        {o.description && <p className="mt-3 max-w-2xl text-[13.5px] text-ink-2">{o.description}</p>}
        {aliases.length > 0 && (
          <div className="mt-3 flex flex-wrap items-center gap-1.5">
            <span className="text-[11.5px] text-ink-3">Also known as</span>
            {aliases.slice(0, 6).map((a) => (
              <Badge key={a} tone="outline" size="xs" className="max-w-[200px]">
                <span className="truncate">{a}</span>
              </Badge>
            ))}
            {aliases.length > 6 && <span className="text-[11.5px] text-ink-4">+{aliases.length - 6}</span>}
          </div>
        )}
      </header>

      <MetricRow cols={5}>
        <MetricCell>
          <Metric value={fmtInt(o.facilityCount)} label="Facilities" note={statusTotal ? `${fmtInt(o.pipeline.operational.count)} operational` : undefined} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(o.countryCount)} label="Countries" />
        </MetricCell>
        <MetricCell>
          <Metric value={o.metroCount === undefined ? "—" : fmtInt(o.metroCount)} label="Markets" />
        </MetricCell>
        <MetricCell>
          <Metric value={<MwFigure mw={o.knownMw} unitClassName="text-[0.5em]" />} label="Known operational MW" note={o.knownMw ? `published figures · ${fmtPct(coverage)} coverage` : `no published figure · ${fmtPct(coverage)} of facilities publish MW`} />
        </MetricCell>
        <MetricCell>
          <Metric value={<MwFigure mw={constructionMw} estimate unitClassName="text-[0.5em]" />} label="Under construction" note={constructionMw === null ? `${fmtInt(o.pipeline.construction.count)} ${pluralize(o.pipeline.construction.count, "site")}, MW not published` : `${fmtInt(o.pipeline.construction.count)} ${pluralize(o.pipeline.construction.count, "site")}`} />
        </MetricCell>
      </MetricRow>
      <MetricRow cols={5} className="border-t-0 [&>div]:border-t-0">
        <MetricCell>
          <Metric size="sm" value={<MwFigure mw={plannedMw} estimate unitClassName="text-[0.5em]" />} label="Planned MW" note={plannedMw === null ? "not published" : "approved + announced"} />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(o.aiCount ?? o.aiFacilities.length)} label="AI sites" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(o.cloudRegionCount ?? cloud.length)} label="Cloud regions" note={o.cloudRegionCount || cloud.length ? "cloud exposure" : "none published"} />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(o.projectCount ?? o.projects.length)} label="Projects" note={o.projectPlannedMw ? `≈ ${fmtMw(o.projectPlannedMw)} planned` : undefined} />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={<CoverageBar value={coverage} width="w-full" label="Capacity coverage" />} label="Capacity coverage" note="share of facilities with a MW figure" />
        </MetricCell>
      </MetricRow>

      <SectionNav items={sections} className="mt-4" />

      <div className="flex flex-col gap-8 pt-6">
        <Section id="map" title="Portfolio map" description="Facilities operated; hollow rings are city-level locations." className="scroll-mt-28">
          <EntityMap filters={{ operator: o.slug }} center={{ lat: 25, lng: 10 }} zoom={1.2} openLabel="Open footprint in map" className="h-[240px] sm:h-[360px]" />
          {statusTotal > 0 && (
            <div className="mt-3">
              <div className="label-caps mb-1.5">Status</div>
              <StackedBar data={o.statusBreakdown} height={10} />
            </div>
          )}
        </Section>

        <Section id="pipeline" title="Pipeline" description="Facilities by lifecycle bucket with known MW — containment-aware (a campus and its buildings are never both counted)." className="scroll-mt-28">
          <PipelineBars pipeline={o.pipeline} />
          <PublishedOnlyNote className="mt-2" />
        </Section>

        <Section id="geography" title="Geographic diversity" description="Share of the operator's facilities by country and by market." className="scroll-mt-28">
          <div className="grid gap-6 md:grid-cols-2">
            <div>
              <div className="label-caps mb-2">Top countries</div>
              {o.topCountries.length ? <ShareList items={o.topCountries.map((c) => ({ key: c.iso2, label: c.name, href: routes.country(c.slug), count: c.facilityCount, share: c.share, mw: c.knownMw, iso2: c.iso2 }))} /> : <HonestEmpty title="No facility located in a country yet" />}
              {o.countries.length > o.topCountries.length && <p className="mt-2 text-[11.5px] text-ink-4">Top {o.topCountries.length} of {o.countries.length} countries — the facility table covers all of them.</p>}
            </div>
            <div>
              <div className="label-caps mb-2">Top markets</div>
              {o.topMetros.length ? <ShareList items={o.topMetros.map((m) => ({ key: m.id, label: m.name, href: routes.market(m.slug), count: m.facilityCount, share: m.share, mw: m.knownMw, iso2: m.countryIso2 }))} /> : <HonestEmpty title="No facility assigned to a market yet" detail="facilities outside any defined metro are not counted here" />}
              {o.metros.length > o.topMetros.length && <p className="mt-2 text-[11.5px] text-ink-4">Top {o.topMetros.length} of {o.metros.length} markets.</p>}
            </div>
          </div>
        </Section>

        <Section id="velocity" title="Expansion velocity" description="New facilities, projects, countries and markets per window; the basis of every date is labelled." className="scroll-mt-28">
          <ExpansionVelocityBlock velocity={o.velocity} />
        </Section>

        <Section id="events" title="Recent events" description="Physical changes (facilities, projects, openings, capacity) are kept apart from corporate events (acquisitions, financing, partnerships, executive changes)." className="scroll-mt-28" aside={<Link href={routes.live(`operator=${o.slug}`)} className="text-[12px] text-ink-3 hover:text-ink">Live feed →</Link>}>
          <div className="grid gap-6 lg:grid-cols-2">
            <div>
              <h3 className="mb-1.5 text-[13px] font-semibold text-ink">
                Physical <span className="figure text-[11px] font-normal text-ink-3">{fmtInt(physical.length)}</span>
              </h3>
              <EventList events={physical.slice(0, 12)} dense emptyTitle="No physical change detected yet" emptyDescription="Facility, project, opening and capacity changes appear here as connectors observe them." />
            </div>
            <div>
              <h3 className="mb-1.5 text-[13px] font-semibold text-ink">
                Corporate <span className="figure text-[11px] font-normal text-ink-3">{fmtInt(corporate.length)}</span>
              </h3>
              <EventList events={corporate.slice(0, 12)} dense emptyTitle="No corporate event recorded" emptyDescription="Acquisitions, financing, partnerships and executive changes are attached to the operator, never turned into projects." />
            </div>
          </div>
        </Section>

        <Section id="ai" title="AI facilities" description="Sites with confirmed or likely AI / HPC evidence; a single keyword never confirms a site." className="scroll-mt-28" aside={<Link href={routes.ai()} className="text-[12px] text-ink-3 hover:text-ink">AI index →</Link>}>
          {o.aiFacilities.length ? <FacilityTable items={o.aiFacilities} columns={["market", "country", "status", "mw", "type"]} /> : <HonestEmpty title="No AI / HPC facility with evidence" detail="facilities appear here when a source describes them as AI, HPC, GPU or accelerated-computing infrastructure" />}
        </Section>

        <Section id="cloud" title="Cloud regions" description={o.isCloudProvider ? "Public cloud regions operated by this provider." : "Cloud regions associated with this operator's markets or tenants."} className="scroll-mt-28">
          {cloud.length ? (
            <Table dense mobileCollapse={{ total: cloud.length, label: "cloud regions" }}>
              <THead>
                <tr>
                  <Th>Code</Th>
                  <Th className="hidden sm:table-cell">Region</Th>
                  <Th>Country</Th>
                  <Th numeric className="hidden md:table-cell">
                    AZs
                  </Th>
                  <Th>Status</Th>
                  <Th className="hidden lg:table-cell">Launched</Th>
                </tr>
              </THead>
              <TBody>
                {cloud.map((cr) => (
                  <Tr key={cr.id}>
                    <Td primary>
                      <RowLink href={routes.cloudRegion(cr.slug)} className="figure text-[12.5px]">
                        {cr.code}
                      </RowLink>
                      <div className="text-[11.5px] text-ink-3 sm:hidden">{cr.name}</div>
                    </Td>
                    <Td label="Region" className="hidden text-ink-2 sm:table-cell">
                      {cr.name}
                    </Td>
                    <Td label="Country">
                      <CountryFlag iso2={cr.countryIso2} withName className="max-w-[160px] text-ink-2" />
                    </Td>
                    <Td label="AZs" numeric className="hidden md:table-cell">
                      {cr.availabilityZones ?? <span className="text-ink-4">—</span>}
                    </Td>
                    <Td label="Status">
                      <CloudStatusBadge status={cr.status} />
                    </Td>
                    <Td label="Launched" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
                      {fmtDate(cr.launchedOn)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          ) : (
            <HonestEmpty title="No cloud region linked" detail="cloud exposure is published by the providers' region lists" />
          )}
        </Section>

        <Section id="projects" title="Projects" description="Announced, permitted and under-construction developments linked to this operator (announcements, not facilities)." className="scroll-mt-28" aside={o.projects.length > 0 ? <Link href={routes.projects(`operator=${o.slug}`)} className="text-[12px] text-ink-3 hover:text-ink">All projects →</Link> : undefined}>
          <ProjectList items={o.projects} emptyTitle="No project linked to this operator" emptyDescription="Projects are created only from announcements that name a site, a location and a development verb." />
        </Section>

        <Section id="facilities" title="Facilities" description={`${fmtInt(facTotal)} indexed · sorted by known capacity`} className="scroll-mt-28">
          <PagedFacilities items={o.facilities} total={facTotal} page={fPage} perPage={facPer} hrefFor={(p) => fPageHref(base, sp, p)} columns={["market", "country", "status", "mw", "type", "confidence"]} />
        </Section>

        <Section id="claims" title="Claims" description="Every capacity and investment figure asserted about this operator, with its scope. Portfolio and company figures are shown as evidence, never summed into facilities." className="scroll-mt-28">
          <ClaimsTable claims={o.claims} kind="all" emptyNote="No operator-level claim has been extracted yet — portfolio and company figures appear here once a document asserts one." />
        </Section>

        <Section id="quality" title="Data quality" description="Sources, completeness, claims by status and open sanity flags for this record." className="scroll-mt-28">
          <DataQualityPanel q={o.dataQuality} />
        </Section>

        <Section id="history" title="Source history" description="Observations and page changes that shaped this record." className="scroll-mt-28">
          {o.sourceHistory.length ? <SourceHistory items={o.sourceHistory.slice(0, 40)} /> : <EmptyState compact title="No source history yet" />}
        </Section>
      </div>

      <SourcesFooter sources={r.sources} updatedAt={o.updatedAt} note={o.knownMw === null ? `No operational MW figure has been published by the sources indexed for ${o.name}; counts are exact, capacities appear only when a source publishes them.` : undefined} />
    </Page>
  );
}